<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>后台管理</title>
    <link rel="stylesheet" href="js/bootstrap-theme.min.css" />
    <link rel="stylesheet" href="js/bootstrap.min.css">
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/bootstrap-table.js"></script>
</head>
<style type="text/css">
    body {
        padding: 20px;
    }

    .headLeft {
        float: left;
    }

    .headRight {
        padding-top: 40px;
        padding-left: 340px;
    }

    .search {
        margin-bottom: 10px;
    }

    .search .toolbar {}
</style>
<!--必须使用较新版本的BootStrap才有如下效果-->

<body>
<div class="container-fluid">
    <div class="row">
        <nav class="navbar navbar-default" role="navigation">
            <div class="container">
                <div class="navbar-header">
                    <a class="navbar-brand " href="#">后台管理系统</a>
                </div>
                <div id="navbar" class="navbar-right">
                    <a class="navbar-brand" href="#">当前用户：Cays</a>
                </div>
            </div>
        </nav>
    </div>
    <div class="row">
        <div class="col-md-3">
            <div class="list-group">
                <!--激活，作为标题-->
                <a href="#" class="list-group-item active ">
                    系统菜单
                </a>
                <a href="#" class="list-group-item">雇员管理</a>
                <a href="#" class="list-group-item">部门管理</a>
                <a href="#" class="list-group-item">密码管理</a>
                <a href="#" class="list-group-item">个人信息</a>
                <a href="#" class="list-group-item">账户信息</a>
            </div>
        </div>
        <div class="col-md-9">
            <div>
                <ol class="breadcrumb">
                    <li><span class="glyphicon glyphicon-home"></span>&nbsp;
                        <a href="#">主页</a>
                    </li>
                    <li class="active"></li>
                </ol>
            </div>
            <div align="center" style="padding-top: 1px;">
                <div class="templatemo-content col-1 light-gray-bg">
                    <!--正文部分-->
                    <table id="mytab" class="table table-hover"></table>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-md-12">
            <div align="center" style="padding-top: 200px">
                Copyright © 2019-2020 Cays
            </div>
        </div>
    </div>
</div>
</body>
<script type="text/javascript">
    $('#mytab').bootstrapTable({
        method : 'get',
        url : "/emp/list",//请求路径
        striped : true, //是否显示行间隔色
        pageNumber : 1, //初始化加载第一页
        pagination : true,//是否分页
        sidePagination : 'client',//server:服务器端分页|client：前端分页
        pageSize : 4,//单页记录数
        pageList : [ 5, 10, 20, 30 ],//可选择单页记录数
        showRefresh : true,//刷新按钮
        queryParams : function(params) {//上传服务器的参数
            var temp = {//如果是在服务器端实现分页，limit、offset这两个参数是必须的
                //limit : params.limit, // 每页显示数量
                //offset : params.offset, // SQL语句起始索引
                //page : (params.offset / params.limit) + 1, //当前页码
                //Name : $('#search_name').val(), //参数
                //Tel : $('#search_tel').val()   //参数
            };
            return temp;
        },
        columns : [ {
            title : '雇员号',
            field : 'empno',
            sortable : true
        }, {
            title : '雇员名',
            field : 'ename',
            sortable : true
        }, {
            title : '雇员工作',
            field : 'job'
        }, {
            title : '雇员经理',
            field : 'mgr'
        }, {
            title : '雇员雇佣时间',
            field : 'hiredate'
        }, {
            title : '雇员薪水',
            field : 'sal'
        }, {
            title : '雇员佣金',
            field : 'comm'
        }, {
            title : '雇员部门号',
            field : 'deptno'
            //formatter : formatSex,//对返回的数据进行处理再显示
        }, {
            title : '操作',
            field : 'id',
            formatter : operation//对资源进行操作
        } ]
    });

    //value代表该列的值，row代表当前对象
    function formatSex(value, row, index) {
        return value == 1 ? "男" : "女";
        //或者 return row.sex == 1 ? "男" : "女";
    }

    //删除、编辑操作
    function operation(value, row, index) {
        var htm = "<button>删除</button><button>修改</button>"
        return htm;
    }

    //查询按钮事件
    $('#search_btn').click(function() {
        $('#mytab').bootstrapTable('refresh', {
            url : '/emp/list'
        });
    })
</script>
</html>